<template>
  <div class="tinymce-container editor-container">
    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
    <!-- <div class="editor-custom-btn-container">
      <editorImage
        color="#1890ff"
        class="editor-upload-btn"
        @successCBK="imageSuccessCBK"
      ></editorImage>
    </div> -->
  </div>
</template>

<script>
// import { policy } from "@/api/oss";
import editorImage from "./components/editorImage";
import "../../../public/tinymce4.7.5/langs/zh_CN";
import { upload } from "@/api/upload";

const plugins = [
  `advlist anchor autolink autosave code codesample colorpicker colorpicker
  contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime
  legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace
  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`,
];
const toolbar = [
  `bold italic underline strikethrough  alignleft aligncenter |
  alignright outdent indent  blockquote undo redo removeformat code`,
  `hr bullist numlist link image charmap	 preview anchor pagebreak|
    fullscreen insertdatetime media table  forecolor backcolor`,
];
export default {
  name: "tinymce",
  components: { editorImage },
  props: {
    id: {
      type: String,
    },
    value: {
      type: String,
      default: "",
    },
    toolbar: {
      type: Array,
      required: false,
      default() {
        return [];
      },
    },
    menubar: {
      default: "file edit insert view format table",
    },
    height: {
      type: Number,
      required: false,
      default: 500,
    },
    width: {
      type: Number,
      required: false,
      default: 720,
    },
  },
  data() {
    return {
      hasChange: false,
      hasInit: false,
      tinymceId: this.id || "vue-tinymce-" + +new Date(),
    };
  },
  watch: {
    value(val) {
      if (!this.hasChange && this.hasInit) {
        this.$nextTick(() =>
          window.tinymce.get(this.tinymceId).setContent(val)
        );
      }
    },
  },
  mounted() {
    this.initTinymce();
  },
  activated() {
    this.initTinymce();
  },
  deactivated() {
    this.destroyTinymce();
  },
  methods: {
    initTinymce() {
      const _this = this;
      window.tinymce.init({
        //
        images_upload_url: process.env.VUE_APP_BASE_API + "/common/upload",
        selector: `#${this.tinymceId}`,
        width: this.width,
        height: this.height,
        language: "zh_CN",
        body_class: "panel-body ",
        color_cols: 7,
        custom_colors: false,
        color_map: ["666666"],
        object_resizing: false,
        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
        menubar: false,
        plugins: plugins,
        end_container_on_empty_block: true,
        powerpaste_word_import: "clean",
        code_dialog_height: 450,
        code_dialog_width: 1000,
        advlist_bullet_styles: "square",
        advlist_number_styles: "default",
        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
        default_link_target: "_blank",
        // valid_elements: "p[style],br,b,,i,strong,font[style],em",
        valid_elements: "p[*],img[*],a[*],font[*],br,b,i,strong,em",
        link_title: false,
        // paste_preprocess: function (plugin, args) {
        //   args.content = _this.strip_tags(args.content, "<a>");
        // },
        init_instance_callback: (editor) => {
          if (_this.value) {
            editor.setContent(_this.value);
          }
          _this.hasInit = true;
          editor.on("NodeChange Change KeyUp SetContent", () => {
            this.hasChange = true;
            this.$emit("input", editor.getContent());
          });
        },
        images_upload_handler: async (blobInfo, success, failure) => {
          const formData = new FormData();
          // console.log(blobInfo.blob());
          formData.append("file", blobInfo.blob());
          // request.post("/manage/upload", formData).then((res) => {
          //   console.log(res);
          //   success(res); //将图片展示到编辑器中
          // });
          //
          upload(formData).then((res) => {
            success(res.url);
          });
          return;
          process.env.VUE_APP_BASE_API + "/common/upload",
            this.$post(this.$api + "/dev-api/common/upload", formData).then(
              (res) => {
                success(res.url);
              }
            );
        },
      });
    },
    destroyTinymce() {
      if (window.tinymce.get(this.tinymceId)) {
        window.tinymce.get(this.tinymceId).destroy();
      }
    },
    strip_tags(str, allowed_tags) {
      var key = "",
        allowed = false;
      var matches = [];
      var allowed_array = [];
      var allowed_tag = "";
      var i = 0;
      var k = "";
      var html = "";
      var replacer = function (search, replace, str) {
        return str.split(search).join(replace);
      };
      // Build allowes tags associative array
      if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
      }

      str += "";
      console.log(str);
      // Match tags
      matches = str.match(/(<\/?[\S][^>]*>)/gi);
      console.log(matches);
      // Go through all HTML tags
      for (key in matches) {
        if (isNaN(key)) {
          // IE7 Hack
          continue;
        }
        // Save HTML tag
        html = matches[key].toString();
        // console.log(" html = matches[key].toString()", html);
        // Is tag not in allowed list? Remove from str!
        allowed = false;
        // Go through all allowed tags
        for (k in allowed_array) {
          // Init
          allowed_tag = allowed_array[k];
          i = -1;
          if (i != 0) {
            i = html.toLowerCase().indexOf("<" + allowed_tag + ">");
          }
          if (i != 0) {
            i = html.toLowerCase().indexOf("<" + allowed_tag + " ");
          }
          if (i != 0) {
            i = html.toLowerCase().indexOf("</" + allowed_tag);
          }
          i = `<p>${i}</p>`;
          console.log(html);
          // Determine
          if (i == 0) {
            allowed = true;
            break;
          }
        }
        if (!allowed) {
          str = replacer(html, "", str); // Custom replace. No regexing
        }
        // console.log(key, "-------------", str);
      }
      return str;
    },
    setContent(value) {
      // console.log("setContent", value);
      window.tinymce.get(this.tinymceId).setContent(value);
    },
    getContent() {
      window.tinymce.get(this.tinymceId).getContent();
    },
    imageSuccessCBK(arr) {
      const _this = this;
      arr.forEach((v) => {
        window.tinymce
          .get(_this.tinymceId)
          .insertContent(`<img class="wscnph" src="${v.url}" >`);
      });
    },
  },
  destroyed() {
    this.destroyTinymce();
  },
};
</script>
<style scoped>
.tinymce-container {
  position: relative;
}

.tinymce-container >>> .mce-fullscreen {
  z-index: 10000;
}

.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}

.editor-custom-btn-container {
  position: absolute;
  right: 10px;
  top: 2px;
  /*z-index: 2005;*/
}

.editor-upload-btn {
  display: inline-block;
}
</style>
